 <template>
    <panel title="新手特权" class="panel">
        <section class="content">
            <div class="item">
                <h4>下载APP <span class="red">送888元礼包</span></h4>
                <p>新手专享</p>
                <img src="//img30.360buyimg.com/baoxian/jfs/t6301/154/955927785/38436/d20e20b9/594773f4N1dd679d8.png" alt="">
            </div>
            <div class="item">
                <ul>
                    <li>
                        <img src="//storage.jd.com/article-image/15281864278025a0cf3b0N6531f1e1.png" alt="">
                        <h4>领128元新手礼包</h4>
                        <p>立即开通</p>
                    </li>
                    <li>
                        <img src="//storage.jd.com/article-image/1489716171209323.jpg" alt="">
                        <h4>打白条 <span class="red">享免息</span></h4>
                        <p>立即开通享豪礼</p>
                    </li>
                </ul>
            </div>
        </section>
    </panel>
</template>
<script>
import Panel from "@/components/panel"
export default {
    name: 'Novice',
    components: {
        Panel
    }
}
</script>
<style lang="scss" scoped>
    @import '~assets/scss/element.scss';
    .panel{
        @include panel;
        /deep/ h4.one{ // /deep/解决父子件改变子组件的样式方式
            border-bottom: 1px solid #ddd;
        }
        .content{
            @include list(row);
            .item{
                width: 50%;
                box-sizing: border-box;
                &:first-child{
                    padding: .32rem .2rem;
                    text-align: center;
                    border-right: 1px solid #ddd;
                    img{
                        width: 1.32rem;
                        height: 1.32rem;
                        margin: .2rem auto 0;
                    }
                }
                h4{
                    font-size: .26rem;
                    line-height: .4rem;
                    .red{
                        color: red;
                    }
                }
                p{
                    color: #999;
                    font-size: .24rem;
                    margin-top: .06rem;
                }
                ul{
                    width: 100%;
                    li{
                        width: 100%;
                        height: 1.44rem;
                        padding: .32rem .28rem;
                        box-sizing: border-box;
                        &:first-child{
                            border-bottom: 1px solid #ddd;
                        }
                        h4{  // 超出不换行，显示...
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            text-align: left
                        }
                        img{
                            width: .8rem;
                            height: .8rem;
                            float: right;
                        }
                    }
                }
                
            }
            
        }
    }
    
</style>




